import { useState, useEffect } from 'react'
import personPng from './images/人口.png'
import ZoneAreaPng from './images/地域面积.png'
import countyPng from './images/社区行政村.png'
import townPng from './images/乡镇街道.png'
import basePng from './images/基础背景.png'
import StatApi from '../../../../../../../utils/apis/mg-api/StatApi'
import './index.less'
import { CaretDownOutlined } from '@ant-design/icons';
import { Popover, Button } from 'antd'
import useMap from '../../hooks/useMap'
export default function AreaStat(props) {
    const [items, setItems] = useState([{
        icon: personPng,
        value: 0,
        name: '人口数量',
        unit: '万人'
    }, {
        icon: ZoneAreaPng,
        value: 0,
        name: '地域面积',
        unit: 'k㎡'
    }, {
        icon: townPng,
        value: 0,
        name: '乡镇街道',
        unit: '个'
    }, {
        icon: countyPng,
        value: 0,
        name: '社区行政村',
        unit: '个'
    }])
    const [datas, setDatas] = useState([])
    const [currentZoneName, setCurrentZoneName] = useState('宜宾市');
    const map = useMap();

    useEffect(() => {
        StatApi.basic().then(resp => {
            setDatas([{
                zoneName: '宜宾市',
                "personCount": _.sumBy(resp.data, 'personCount')?.toFixed(2),
                "zoneArea": _.sumBy(resp.data, 'zoneArea')?.toFixed(0),
                "townCount": _.sumBy(resp.data, 'townCount'),
                "countyCount": _.sumBy(resp.data, 'countyCount')
            }, ...resp.data]);
        })
    }, [])

    useEffect(() => {
        if (datas?.length && currentZoneName) {
            setItems(items => {
                const targetData = datas.find(d => d.zoneName === currentZoneName);
                return [
                    {
                        ...items[0],
                        value: targetData?.personCount,
                        unit: '万人'
                    },
                    {
                        ...items[1],
                        value: targetData?.zoneArea,
                        unit: 'k㎡'
                    },
                    {
                        ...items[2],
                        value: targetData?.townCount,
                        unit: '个'
                    },
                    {
                        ...items[3],
                        value: targetData?.countyCount,
                        unit: '个'
                    }
                ]
            })
        }
    }, [datas, currentZoneName])


    return <div className='layout-h area-stat' style={{
        flexWrap: 'wrap',
        justifyContent: "space-around",
        alignItems: "center",
        padding: 12,
        gap: 12
    }}>
        {items.map(item => {
            return <div className='layout-h' key={item.name} style={{
                width: 160
            }}>
                <div style={{
                    height: 45,
                    display: 'flex',
                    alignItems: 'flex-end',
                    marginRight: 8
                }}>
                    <div style={{
                        background: `url(${basePng})`,
                        backgroundSize: 'contain',
                        backgroundRepeat: 'no-repeat',
                        backgroundPosition: 'center',
                        width: 49,
                        height: 33,
                        position: 'relative'
                    }}>
                        <img src={item.icon} style={{
                            width: 32,
                            height: 32,
                            position: "absolute",
                            top: -12,
                            left: '50%',
                            transform: 'translateX(-50%)'
                        }} />
                    </div>
                </div>
                <div style={{
                    height: 45,
                    display: 'flex',
                    alignItems: 'center'
                }}>
                    <div className='layout-v fill'>
                        <div className='layout-h center'>
                            <div className='area-stat-value' style={{
                                marginRight: 4
                            }}>{item.value}</div>
                            <div style={{
                                fontSize: 12,
                                color: '#fff',
                                whiteSpace: 'nowrap'
                            }}>{item.unit}</div>
                        </div>
                        <div style={{
                            fontSize: 12,
                            color: '#fff'
                        }}>{item.name}</div>
                    </div>
                </div>
            </div>
        })}
        {/* <Popover wrapperClassName='area-stat-zone-popover' placement='bottomRight' trigger={"click"} content={<div style={{
            width: 300, height: 100
        }}>
            {datas?.map(data => {
                return <Button className={currentZoneName === data.zoneName ? 'zone-selected' : ''} onClick={e => {
                    setCurrentZoneName(data.zoneName);

                    const zoneLayer = map.getLayers().getArray().find(layer => layer.get('layerId') === 'zone-layer');
                    const features = zoneLayer.getSource().getFeatures();
                    const feature = features.find(f => f.get('name') === data.zoneName);
                    if (feature) {
                        map.getView().fit(feature.getGeometry());
                    }
                }} key={data.zoneName} type="text">{data.zoneName}</Button>
            })}
        </div>}>
            <div className='area-stat-zone layout-h center j-center'>
                <div className='area-stat-zone-text'>{currentZoneName}</div>
                <CaretDownOutlined />
            </div>
        </Popover> */}
    </div>;
}